<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/txx.js"></script>
    <script src="js/login.js"></script>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
<div id="app">
    <txx @myinfo="a"></txx>
    <main class="c900 el-card" style="align-items: stretch;overflow: visible">
        <h2>租车记录</h2>
        <el-card style="width: 100%">
            <div class="flex" style="font-weight: bolder">
                <span>编号</span>
                <span>车辆照片</span>
                <span>品牌车型</span>
                <span>起止日期</span>
                <span style="text-align: center">金额</span>
                <span>状态</span>
                <span>操作</span>
            </div>
        </el-card>
        <el-card v-for="(l, num) in lease" style="width: 100%">
            <div class="flex">
                <span>{{ (pageNum - 1) * pageSize +  num + 1}}</span>
                <span><img :src="l.image" style="width: 120px;height: 90px"></span>
                <span>{{l.brand + ":" + l.model}}</span>
                <span>{{l.days.split(',')[0]}}<br>~<br>{{l.days.split(',').pop()}}</span>
                <span class="price">{{l.money}}元<small></small></span>
                <span>{{l.state}}</span>
                <span><a class="abtn">还车</a></span>
            </div>
        </el-card>
        <div style="text-align: right; margin-top: 20px">
            <el-pagination
                    @current-change="handleCurrentChange"
                    @current-change="currentChange"
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size = "pageSize">
            </el-pagination>
        </div>
    </main>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            myinfo: {},
            lease:{},
            total: 100,
            pageNum: 1,
            pageSize: 4,

        },
        created() {

        },
        methods : {
            a(myinfo){
                this.myinfo = myinfo;
                this.getLeaseByUidNum();
                axios.get("txxLease/getLeaseByUid",{
                    params:{
                        id: this.myinfo.id,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                    }
                }).then(res=>this.lease = res.data)
            },
            handleCurrentChange(pageNum){
                this.pageNum = pageNum;
                this.a(this.myinfo)
            },
            getLeaseByUidNum(){
                axios.get("txxLease/getLeaseByUidNum", {
                    params:{
                        id: this.myinfo.id
                    }
                }).then(res=>this.total = res.data)
            }
        }
    })
</script>
</body>
</html>
<style>

</style>
